<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;list-style-type:none;}
        a,img{border:0;}
        /* banner */
        #banner{margin:30px auto 0px auto;width:950px;height:400px;}
        .slides{margin:0px auto;width:950px;height:400px;overflow:hidden;position:relative;}
        .slide-pic{width:950px;overflow:hidden;list-style:none;}
        .slide-pic img{width:950px;height:400px;}
        .slide-pic li {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
        }
        .slide-pic li.cur {
            z-index: 1;
        }
        .slide-li {
            left: 0;
            bottom: 0;
            position: absolute;
            z-index: 10;
        }
        .slide-li li{width:190px;height:30px;float:left;overflow:hidden;list-style:none;}
        .slide-li a{width:190px;height:30px;color:#000;font-size:12px;display:block;}
        .slide-li a:hover{color:#F00;text-decoration:none;}
        .op li{background:#999999;filter:alpha(opacity=60);opacity:0.6;}
        .op li.cur{background: red;}
        .prev, .next {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #fff;
            right: 0;
            top: 50%;
            margin-top: -25px;
            z-index: 999;
        }
        .prev {
            right: auto;
            left: 0;
        }
    </style>
    <script src="../lib/jquery-3.1.0.js"></script>
    <script>
        $(document).ready(function() {
            var fadeTransition = function(selector) {
                var $target = $(selector),
                        $slideLi = $target.find('.slide-li > li'),
                        $sliderPic = $target.find('.slide-pic > li'),
                        timer;
                $sliderPic.each(function(i) {
                    $(this).attr('index', i);
                });

                $sliderPic.hover(function() {
                    clearInterval(timer);
                },function() {
                   timer = setInterval(function() {
                            $target.find('a.next').trigger('click');
                    }, 2000); 
                });

                $slideLi.on('click', function() {
                    var $this = $(this),
                            currIndex = $this.index(),
                            oldIndex = $this.siblings('.cur').index();
                    $this.addClass('cur').siblings('.cur').removeClass('cur');
                    $sliderPic.eq(oldIndex).before($sliderPic.eq(currIndex));
                    $target.find('.slide-pic > li').each(function(i) {
                        $(this).css('z-index', $sliderPic.length - i - 1);
                    });
                    $sliderPic.eq(oldIndex).show().fadeOut();
                    $target.find('.slide-pic').find('li[index='+currIndex+']').hide().fadeIn();
                });

                $target.find('a.next,a.prev').on('click', function() {
                    var $this = $(this);
                    var oldIndex = $slideLi.filter('.cur').index();
                    if ($this.hasClass('next')) {
                         oldIndex++;
                        if (oldIndex == $slideLi.length) {
                            oldIndex = 0;
                        }
                        $slideLi.eq(oldIndex).trigger('click');
                    } else {
                        if (oldIndex == 0 ) {
                            oldIndex = $slideLi.length;
                    }
                        oldIndex--;
                        $slideLi.eq(oldIndex).trigger('click');
                    }
                });

                timer = setInterval(function() {
                    $target.find('a.next').trigger('click');
                }, 2000);
            };
            fadeTransition('.slides');
        });
    </script>
</head>
<body>

<div id="banner">
    <div class="slides">
        <ul class="slide-pic">
            <li class="cur">
                <a href="javascript:;">
                    <img width="950" height="400" src="http://www.17sucai.com/preview/1162/2013-10-19/%E7%AE%80%E6%B4%81%E7%9A%84%E4%BA%94%E5%B1%8F%E6%B7%A1%E5%85%A5%E6%B7%A1%E5%87%BAjQuery%E7%84%A6%E7%82%B9%E5%9B%BE%E4%BB%A3%E7%A0%81/images/banner_1.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img width="950" height="400" src="http://www.17sucai.com/preview/1162/2013-10-19/%E7%AE%80%E6%B4%81%E7%9A%84%E4%BA%94%E5%B1%8F%E6%B7%A1%E5%85%A5%E6%B7%A1%E5%87%BAjQuery%E7%84%A6%E7%82%B9%E5%9B%BE%E4%BB%A3%E7%A0%81/images/banner_2.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img width="950" height="400" src="http://www.17sucai.com/preview/1162/2013-10-19/%E7%AE%80%E6%B4%81%E7%9A%84%E4%BA%94%E5%B1%8F%E6%B7%A1%E5%85%A5%E6%B7%A1%E5%87%BAjQuery%E7%84%A6%E7%82%B9%E5%9B%BE%E4%BB%A3%E7%A0%81/images/banner_3.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img width="950" height="400" src="http://www.17sucai.com/preview/1162/2013-10-19/%E7%AE%80%E6%B4%81%E7%9A%84%E4%BA%94%E5%B1%8F%E6%B7%A1%E5%85%A5%E6%B7%A1%E5%87%BAjQuery%E7%84%A6%E7%82%B9%E5%9B%BE%E4%BB%A3%E7%A0%81/images/banner_4.jpg" />
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img width="950" height="400" src="http://www.17sucai.com/preview/1162/2013-10-19/%E7%AE%80%E6%B4%81%E7%9A%84%E4%BA%94%E5%B1%8F%E6%B7%A1%E5%85%A5%E6%B7%A1%E5%87%BAjQuery%E7%84%A6%E7%82%B9%E5%9B%BE%E4%BB%A3%E7%A0%81/images/banner_5.jpg" />
                </a>
            </li>
        </ul>
        <ul class="slide-li op">
            <li class="cur">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>

        <a class="next" href="javascript:;"></a>
        <a class="prev" href="javascript:;"></a>
        <!-- <ul class="slide-li slide-txt">
            <li class="cur"><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul> -->
    </div>
</div>

</body>
</html>